<template>
  <div class="news">
    <div class="news-container banner-news">
      <div class="storey overflow  ">
        <div class="wrap-content fullHeight">
          <div class="news-box fullHeight overflow-scroll m-top100 ">
            <div class="news-list fullHeight">
              <div class="news-title">
                <div class="news-title-text">
                  量准快讯
                  <span>XLEMENT NEWS</span>
                </div>
              </div>
              <template v-for="v,i in newsList">
                <a :href="v.newsUrl"
                   target="_blank"
                   class="news-items">
                  <div class="news-item image">
                    <img :src="v.newsImg"
                         alt="">
                  </div>
                  <div class="news-item content">
                    <div class="title">
                      {{v.title}}
                    </div>
                    <div class="info">
                      {{v.content}}
                    </div>
                    <div class="from">
                      {{v.createTime}} 来源：{{v.source}}
                    </div>
                  </div>
                </a>
              </template>
            </div>
          </div>
          <div class="news-line fullHeight overflow-scroll m-top100">
            <div class="timeline">
              <div class="title">
                大事记
                <div class="subtitle">
                  MAJOR EVENTS
                </div>
              </div>
              <div class="milestone">
                <div class="dot">
                </div>
                <div class="year">
                  2020
                </div>
                <div class="detail">
                  世界级晶圆生物芯片及其应用问世
                </div>
              </div>
              <div class="milestone">
                <div class="dot">
                </div>
                <div class="year">
                  2019.10.23
                </div>
                <div class="detail">
                  量准携手“2018年诺贝尔生理学或医学奖获得者”本庶佑教授于武汉成立“本庶佑量准诺贝尔奖工作站”
                </div>
              </div>
              <div class="milestone">
                <div class="dot">
                </div>
                <div class="year">
                  2019.09.26
                </div>
                <div class="detail">
                  佑蜜电子优孕宝斩获2019金麦母婴类品质大奖
                </div>
              </div>
              <div class="milestone">
                <div class="dot">
                </div>
                <div class="year">
                  2019.01.01
                </div>
                <div class="detail">
                  推出首款女性优孕伴侣-佑蜜电子优孕宝
                </div>
              </div>
              <div class="milestone">
                <div class="dot">
                </div>
                <div class="year">
                  2018.06.18
                </div>
                <div class="detail">
                  正式聘请哈佛大学工学院执行院长、国际光学传感器顶级专家Fawaz Habbal教授为首席科学顾问
                </div>
              </div>
              <div class="milestone">
                <div class="dot">
                </div>
                <div class="year">
                  2018.03.28
                </div>
                <div class="detail">
                  量准(武汉)生命科技有限公司成立
                </div>
              </div>
              <div class="milestone">
                <div class="dot">
                </div>
                <div class="year">
                  2017.10.18
                </div>
                <div class="detail">
                  量准（上海）医疗器械有限公司成立（千级工厂-光学芯片加工制造）
                </div>
              </div>
              <div class="milestone">
                <div class="dot">
                </div>
                <div class="year">
                  2017.02.23
                </div>
                <div class="detail">
                  杭州量准健康管理有限公司成立（杭州硬件研发中心）
                </div>
              </div>
              <div class="milestone">
                <div class="dot">
                </div>
                <div class="year">
                  2016.12.28
                </div>
                <div class="detail">
                  量准（上海）实业有限公司成立
                </div>
              </div>
              <div class="milestone">
                <div class="dot">
                </div>
                <div class="year">
                  2017.10.18
                </div>
                <div class="detail">
                  量准（上海）医疗器械有限公司成立（工厂-光学芯片加工制造）
                </div>
              </div>
              <div class="milestone">
                <div class="dot">
                </div>
                <div class="year">
                  2016.01.12
                </div>
                <div class="detail">
                  量准（上海）医疗科技有限公司成立（市场营销整合中心）
                </div>
              </div>
              <div class="milestone">
                <div class="dot">
                </div>
                <div class="year">
                  2016.01.12
                </div>
                <div class="detail">
                  量准（上海）医疗科技有限公司成立（市场营销整合中心）
                </div>
              </div>
              <div class="milestone">
                <div class="dot">
                </div>
                <div class="year">
                  2014.12
                </div>
                <div class="detail">
                  量准美国研发中心LIFEDISC, LLC成立
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { fetchNewsList } from '@/api/common'

export default {
  data() {
    return {
      newsList: [],
    }
  },
  mounted() {
    this.getNewsList()
  },
  methods: {
    async getNewsList() {
      const res = await fetchNewsList()
      this.newsList = res.newsList
    },
  },
}
</script>

<style lang="scss" scoped>
@import '~@/theme/mixin';
.news {
  .banner-news {
    background: url('~@/assets/imgs/news/banner-news.jpg') no-repeat;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
  &-items {
    @include clearfix;
  }
  &-container {
    @include clearfix;
    //   position: absolute;
    //   left: 0;
    //   top: 0;
    //   width: 100%;
    //   height: 100%;
  }

  &-box {
    position: relative;
    width: 70%;
    float: left;
  }

  &-line {
    width: 30%;
    float: left;
    background-color: rgba(255, 255, 255, 0.9);
  }

  &-list {
    padding-right: 40px;
  }

  &-title {
    font-size: 36px;
    border-bottom: 1px solid #fff;
    padding-bottom: 10px;
    margin-bottom: 20px;
    margin-top: 50px;

    &-text {
      color: #fff;

      span {
        font-size: 16px;
      }
    }
  }

  &-items {
    display: block;
    margin: 30px 0;
    background-color: #fff;
    box-shadow: 8px 10px 10px 0px rgba(145, 145, 145, 0.19);

    .image {
      width: 280px;
      float: left;

      img {
        object-fit: cover;
        width: 280px;
        height: 200px;
        display: block;
      }
    }

    .content {
      margin: auto;
      float: left;
      width: 365px;
      font-size: 16px;
      color: #595959;
    }

    .title {
      margin: 20px 0 0 20px;
      color: #0159ac;
      @include toverflow(2);
    }

    .info {
      margin-left: 20px;
      @include toverflow(3);
    }

    .from {
      margin: 10px 20px 0;
      text-align: right;
    }
  }
  .overflow-scroll {
    height: 800px;
    overflow: scroll;
  }

  .timeline {
    position: relative;
    border-left: 1px solid #d1d1d1;
    margin-top: 100px;
    margin-left: 30px;
    margin-bottom: 30px;
    padding-top: 30px;

    .title {
      position: absolute;
      top: -47px;
      color: #0159ac;
      font-size: 36px;
      margin-left: 20px;
    }

    .subtitle {
      font-size: 16px;
      margin-bottom: 66px;
    }

    .milestone {
      position: relative;
      width: 210px;
      margin-top: 30px;

      .dot {
        position: absolute;
        left: -4px;
        top: 7px;
        width: 8px;
        height: 8px;
        border-radius: 100%;
        background-color: #0159ac;
      }

      .year {
        color: #0159ac;
        margin-left: 20px;
      }

      .detail {
        color: #595959;
        margin-left: 20px;
      }
    }

    // .milestone:last-child {
    //   margin-bottom: 120px;
    // }
  }
}
</style>